<template>
  <el-aside :width="slideWidth" class="m-aside">
    <el-menu
      class="silde-menu"
      mode="vertical"
      :collapse-transition="false"
      :default-active="$route.path"
      :unique-opened="true"
      :collapse="slideOpen"
      active-text-color="#1989f9"
    >
      <template v-for="item in routes" v-if="!item.hidden&&item.children">
        <router-link v-if="hasOneShowingChildren(item.children) && !item.children[0].children&&!item.alwaysShow"
                     :to="{name:item.children[0].name,query:{t:new Date().getTime()}}" :key="item.children[0].name">
          <el-menu-item :index="item.path+'/'+item.children[0].path">
            <svg-icon v-if="item.children[0].meta&&item.children[0].meta.icon"
                      :icon-class="item.children[0].meta.icon"></svg-icon>
            <span slot="title"
                  v-if="item.children[0].meta&&item.children[0].meta.title">{{item.children[0].meta.title}}</span>
          </el-menu-item>
        </router-link>
        <el-submenu v-else :index="item.name||item.path" :key="item.name">
          <template slot="title">
            <svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"></svg-icon>
            <span v-if="item.meta&&item.meta.title">{{item.meta.title}}</span>
          </template>
          <template v-for="child in item.children" v-if="!child.hidden">
            <sidebar-item :is-nest="true" class="nest-menu" v-if="child.children&&child.children.length>0"
                          :routes="[child]" :key="child.path"></sidebar-item>
            <router-link v-else :to="{name:child.name,query:{t:new Date().getTime()}}" :key="child.name">
              <el-menu-item :index="item.path+'/'+child.path">
                <svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"></svg-icon>
                <span v-if="child.meta&&child.meta.title">{{child.meta.title}}</span>
              </el-menu-item>
            </router-link>
          </template>
        </el-submenu>
      </template>
    </el-menu>
  </el-aside>
</template>
<script>
  import SidebarItem from "./SidebarItem.vue";
  export default {
    name: "SidebarItem",
    data() {
      return {};
    },
    computed: {
      slideOpen() {
        return this.$store.state.app.slideOpen;
      },
      slideWidth() {
        if (this.slideOpen) {
          return "64px";
        } else {
          return "200px";
        }
      }
    },
    props: {
      routes: {
        type: Array
      },
      isNest: {
        type: Boolean,
        default: false
      },
      components: {
        SidebarItem
      }
    },
    methods: {
      hasOneShowingChildren(children) {
        const showingChildren = children.filter(item => {
          return !item.hidden;
        });
        if (showingChildren.length === 1) {
          return true;
        }
        return false;
      },
      hiddenMenuItemTitle(){
        if (!this.$store.state.app.slideOpen) {
          return;
        }
        this.$nextTick(()=>{
          let list = [];
          document.querySelectorAll('.silde-menu div[aria-describedby]').forEach(item => {
            list.push('#' + item.getAttribute('aria-describedby'));
          })
          if (list.length <= 0) {
            return;
          }
          let addStyle = document.createElement("style");
          addStyle.innerHTML = list.join(',') + '{display:none}';
          document.head.appendChild(addStyle);
        })
      }
    },
    watch: {
      '$store.state.app.slideOpen'(val) {
        if (val) {
          this.$nextTick(()=>{
           setTimeout(()=>{
             this.hiddenMenuItemTitle();
           },550)
          })
        }
      }
    },
    mounted(){
      //隐藏菜单hover的提示文字
      this.hiddenMenuItemTitle();
    },
  };
</script>
<style scoped lang="scss">
 /* .m-aside {
    transition: 0.1s;
  }*/
</style>


